var app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    navbar: [], // 导航栏数据
    src_into_v: '', //导航栏scroll-view中子元素的id值    
    currentTab: 0, // 默认选中标签
    currentPage: 1, // 默认当前页。只在当前导航标签页有效，切换标签后值为1
    pageSize: 30, //一次加载量
    currentNavId: '', //导航栏当前活动元素id
    list: [], // 内容区数据列表
    scrollTop: 0, //内容区scroll-view滚动条位置
    hiddenTotop: true, // 回顶部按钮    
  },
  /**
   * 页面加载
   */
  onLoad() {
    let that = this;
    (async () => {
      let fl = await that.getNavbarData();
      that.setData({
        navbar: fl //导航栏数据
      })
      that.getDataListById(fl[0].id, 0); //默认加载
      that.data.currentNavId = fl[0].id; //默认标签页
    })();
  },
  //获取导航栏数据
  getNavbarData() {
    //直接定义
    //真实项目中可以从数据库获取
    let p = new Promise(resolve => {
      let fenLei = [{
          id: '1',
          name: '菜单1'
        },
        {
          id: '2',
          name: '菜单2'
        },
        {
          id: '3',
          name: '菜单3'
        }
      ]
      resolve(fenLei);
    })
    return p;
  },
  //点击顶部tab切换
  navbarTap: function (e) {
    let index = e.currentTarget.dataset.idx; //被点击的标签下标值
    let id = e.currentTarget.dataset.id; //被点击的标签对象id
    if (this.data.currentTab != index) {
      this.setData({
        list:[], //切换后先清空旧数据
        currentTab: index, //更新活动tab下标值
        currentPage: 1, //当前页
        currentNavId: id //活动tab的id值
      })
      this.getDataListById(id, 1); //根据标签对象id加载数据
    }
  },
  // 滚动swiper切换标签样式
  switchTab: function (e) {
    let index = e.detail.current;
    let t = e.detail.source; //滑动类型
    let id = e.detail.currentItemId; //当前swiper-item的标识符
    //只有index不等于当前，并且是用户触摸时才会切换，避免死循环
    if (this.data.currentTab != index && t == 'touch') {
      this.setData({
        list:[], //切换后先清空旧数据
        currentTab: index, //更新活动tab下标值
        src_into_v: 'id_' + id, //导航栏定位到活动tab
        currentPage: 1, //当前页
        currentNavId: id //活动tab的id值
      });
      this.getDataListById(id, 2); //根据标签对象id加载数据
    }
  },
  /**
   * 根据导航栏id获取数据
   * @param {*} id 
   * @param {*} mode 
   * 0：onLoad初始化加载
   * 1：点击导航栏加载
   * 2：滑动swiper加载
   * 3：触底加载
   * 4：触顶加载 
   * 5: 点击回顶部按钮加载
   */
  getDataListById(id, mode) {
    let currentPage = this.data.currentPage; //当前页
    let pageSize = this.data.pageSize; //一次获取的数据数量，即每页显示数
    let rows = 2293; //总数据量。实际项目从数据库获取
    let pages = Math.ceil(rows / pageSize); //总页数

    //空数据    
    if (rows == 0) {
      that.setData({
        list: []
      })
      return;
    }

    //检测当前页合法性
    if (currentPage < 1) {
      currentPage = 1;
    } else if (currentPage > pages) {
      currentPage = pages;
      wx.showToast({
        title: '没有更多数据了',
        icon: 'none',
        duration: 200
      })
      return;
    }

    let dataArr = []; //数据集

    //查看缓存中是否有当前页数据
    //缓存key值命名规则：data_菜单id_p页码
    let cacheKey = 'data_' + id + '_p' + currentPage;
    let currentPageData = app.getCache(cacheKey);
    //不能用 if (currentPageData) 来判断是否存在，当数据为0时会判断不存在。
    //会导致实际数据库会空时缓存不作用
    if (currentPageData != null) { //存在
      console.log('从缓存中获取 ' + cacheKey + ' 成功')
      dataArr = currentPageData;
    } else { //不存在
      //bug修复：rows=0 时返回
      //---------------------------
      //如果rows为0不返回时，beginIndex会为负值，查询数据库时会出错
      //因为rows为0时，pages=0，currentPage=1,执行 currentPage > pages
      // currentPage = pages 被赋为0，导致beginIndex = (0-1)*pageSize = -pageSize
      //-------------------------------
      let beginIndex = (currentPage - 1) * pageSize; //需要获取数据的开始位置
      //构造模似数据  
      for (let i = 1; i < pageSize + 1; i++) {
        if ((beginIndex + i) > rows) {
          break;
        }
        dataArr.push({
          'id': i + beginIndex,
          'name': '[菜单' + id + '] 数据' + (i + beginIndex)
        })
      }
      //把新获取的数据存入缓存（有效期：10分钟）
      app.saveCache(cacheKey, dataArr, 10);
      console.log(cacheKey + ' 已存入缓存')
    }

    //触底加载时，拼接下一页数据
    if (mode == 3) {
      if (this.data.list.length > 200) { //数据量大于一定值时覆盖掉原来数据
        wx.showToast({
          title: '天哪！数据太多了！等等...',
          icon: 'none',
          duration: 200
        })
        this.setData({
          list: dataArr, //覆盖掉原来数据
          //此时currentPage值不等于1，也不能设为1
          scrollTop: 0 //滚动条位置设为0
        })
      } else { //数据量小于一定值时才允许拼接
        dataArr = this.data.list.concat(dataArr); //拼接数据
        this.setData({
          list: dataArr
        })
      }
    } else { //其它方式的加载都不拼接
      this.setData({
        list: dataArr
      })
    }
    console.log('数据数量：', this.data.list.length);
  },

  //内容区scroll-view滑动到底部
  scrollBottom(e) {
    //console.log("滑动到底部：", e);
    wx.showToast({//showToast()和hideToast()需配对使用。指定duration时可以不用hideToast()
      title: '下一页 ' + (this.data.currentPage + 1),
      icon: 'none',
      duration: 200
    })
    this.setData({
      hiddenTotop: false, //不再隐藏回顶部按钮
      currentPage: this.data.currentPage + 1 //当前页加1
    })
    this.getDataListById(this.data.currentNavId, 3); //加载下一页数据
  },
  /**
   * 内容区scroll-view滑动到顶部
   * list从0开始
   * 本方法不再用
   * 用回顶部按钮替代，可以直接回顶部
   * -----------------------------------------
   * 当数据量大于一定值时，list重置，会重回顶部，但不是从0开始，与本方法功能冲突
   * 容易产生误操作
   */
  /*   scrollTop(e) {
      console.log("滑动到顶部：", e);
      this.setData({
        hiddenTotop: true,//隐藏回顶部按钮
        currentPage: 1//把当前页设为1
      })
      wx.showToast({
        title: '到顶了' + this.data.currentPage,
        icon: 'none'
      })
      this.getDataListById(this.data.currentNavId, 4);
    }, */
  //回顶部
  toTop() {
    this.setData({
      scrollTop: 0, //滚动条位置设为0
      currentPage: 1, //把当前页设为1
      hiddenTotop: true //隐藏回顶部按钮
    })
    this.getDataListById(this.data.currentNavId, 5);
    wx.showToast({
      title: '到顶了',
      icon: 'none',
      duration: 200
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.data.list = [];
  },
})